<template>
    <div>
        <!-- 头部的标题栏 -->
        <mt-header fixed title="Vue内容管理系统"></mt-header>
        <!-- 全局返回的按钮 -->
        <div class="back" v-if="isShow">
            <a @click="goBack">&lt;返回</a>
        </div>

        <!-- 中间的内容靠路由跳转到那个Vue组件来决定显示什么 -->
        <router-view></router-view>

        <!-- 底部导航TabBar -->
        <nav class="mui-bar mui-bar-tab">
            <!-- 路由请求用 https://router.vuejs.org/zh-cn/api/router-link.html -->
            <router-link class="mui-tab-item" to="/home">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </router-link>
            <router-link class="mui-tab-item" to="/member">
                <span class="mui-icon mui-icon-email"></span>
                <span class="mui-tab-label">会员</span>
            </router-link>
            <router-link class="mui-tab-item" to="/shopcart">
                <span class="mui-icon mui-icon-contact"><span id="badgeId" class="mui-badge">{{totalCount}}</span></span>
                <span class="mui-tab-label">购物车</span>
            </router-link>
            <router-link class="mui-tab-item" to="/settings">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">设置</span>
            </router-link>
        </nav>
    </div>
</template>

<style scoped>
    .back{
        position: fixed;
        left: 10px;
        top: 10px;
        z-index: 1;
    }

    .back a{
        color: #fff;
        font-size: 14px;
        font-weight: bold;
    }
</style>

<script>
    import {bus} from './tools/commonvue.js';

    import $ from 'jquery'

    import {getGoodsTotalCount} from './tools/shopcartHelper.js';

    //注册事件的代码必须写在外面
    bus.$on('shopCount',function (shopCount) {
        //console.log("从 goodsinfo 传递过来的 ",shopCount);
        var badgeObj = $("#badgeId");

        var oldValue = badgeObj.text() - 0;

        //累加
        oldValue+=shopCount;

        //赋值回去
        badgeObj.text(oldValue);
    })

    export default{
        data(){
          return {
              isShow:false,
              totalCount:0
          }
        },
        created(){
            //console.log("App 创建出来啦");
            window.addEventListener('load', this.windowOnLoad);
            this.initGoodsTotalCount();
        },
        destroyed(){
            console.log("App 终于销毁啦");
        },
        methods:{
            initGoodsTotalCount(){
                this.totalCount = getGoodsTotalCount();
            },
            goBack(){
                this.$router.go(-1);
            },
            windowOnLoad(){
                if(this.$route.path.toLowerCase()=='/home'||
                        this.$route.path.toLowerCase()=='/member'||
                        this.$route.path.toLowerCase()=='/shopcart'||
                        this.$route.path.toLowerCase()=='/settings'){
                    this.isShow = false;
                }else{
                    this.isShow = true;
                }
            }
        },
        watch: {
            '$route' (to, from) {
                // 对路由变化作出响应...
                if(to.path.toLowerCase()=='/home'||
                        to.path.toLowerCase()=='/member'||
                        to.path.toLowerCase()=='/shopcart'||
                        to.path.toLowerCase()=='/settings'){
                    this.isShow = false;
                }else{
                    this.isShow = true;
                }
            }
        }
    }
</script>